import React, { Component } from 'react';
import { Tree, Icon, Card, Button, Modal, Form, Input, Popconfirm } from 'antd'
import * as fetch from '../../utils/http'
const { TreeNode } = Tree;

class MenuSetting extends Component {
    state = {
        menuList: [],
        modalTitle: '新建菜单',
        visibleMenuModal: false,
        currentMenu: {
            id: '',
            parentID: '',
            menuName: '',
            icon: '',
            url: '',
            key: ''
        },
        addMenu: {
            id: '',
            parentID: '',
            menuName: '',
            icon: '',
            url: '',
            key: ''
        }
    }
    constructor(props) {
        super(props)
        this.getAllMenus()
    }


    getAllMenus() {
        fetch.get('GasMenu/GetMenus').then(res => {
            if (res.isSuccess) {
                this.setState({ menuList: res.data })
            }
        })
    }

    getCurrentMenu(key) {
        const currentKey = key[0]
        const { menuList } = this.state
        const allMenu = []
        menuList.forEach((item, index) => {
            if (item.children.length) {
                allMenu.push(...item.children)
            }
            allMenu.push(item)
        })
        return allMenu.filter(item => item.key === currentKey)[0]
    }

    onMenuTreeSelect(e) {
        if (!e.length) return
        this.setState({
            currentMenu: this.getCurrentMenu(e)
        }, () => {
            console.log(this.state.currentMenu)
        })
    }

    openAddMenuModal() {
        this.setState({
            visibleMenuModal: true,
            addMenu: {
                id: '',
                parentID: '',
                menuName: '',
                icon: '',
                url: '',
                key: ''
            }
        })
    }

    onMenuModalClose() {
        this.setState({
            visibleMenuModal: false
        })
    }

    resetModalForm() {
        this.setState({
            currentMenu: {
                id: '',
                parentID: '',
                menuName: '',
                icon: '',
                url: '',
                key: ''
            }
        })
    }

    //  菜单配置界面
    configItem = ({ parentID, menuName, icon, url, key, id, index }, isEdit) => {
        const ConfigForm = Form.create()(props => {
            const { form } = props
            const { getFieldDecorator } = form;

            const saveForm = () => {
                form.validateFields((err, values) => {
                    if (!err) {
                        console.log(values)
                        const params = Object.assign({}, values)
                        fetch.post('GasMenu/Edit', params).then(res => {
                            if (res.isSuccess) {
                                this.getAllMenus()
                                this.setState({
                                    currentMenu: params
                                })
                            }
                        })
                    }
                })
            }

            const removeMenu = () => {
                form.validateFields((err, values) => {
                    if (!err) {
                        const { id } = values
                        console.log(id)
                        if (id) {
                            fetch.post('GasMenu/Delete', { id }).then(res => {
                                if (res.isSuccess) {
                                    this.getAllMenus()
                                    this.resetModalForm()
                                }
                            })
                        }
                    }
                })
            }

            const openAddModal = () => {
                this.setState({
                    visibleMenuModal: true,
                    modalTitle: '新增子菜单'
                })
            }

            return (
                <div>
                    <Form className="login-form">
                        <Form.Item label="parentID" className="hidden-input">
                            {getFieldDecorator('parentID', {
                                initialValue: parentID
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="parentID"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="Id" className="hidden-input">
                            {getFieldDecorator('id', {
                                initialValue: id
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="parentID"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="菜单名" >
                            {getFieldDecorator('menuName', {
                                initialValue: menuName,
                                rules: [{ required: true, message: '菜单名必输' }],
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="菜单名"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="菜单图标">
                            {getFieldDecorator('icon', {
                                initialValue: icon
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="菜单图标"
                                />
                            )}
                        </Form.Item>
                        <Form.Item label="菜单地址">
                            {getFieldDecorator('url', {
                                initialValue: url,
                                rules: [{ required: true, message: '菜单地址必输' }],
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="菜单地址"
                                />
                            )}
                        </Form.Item>
                        <Form.Item label="菜单key">
                            {getFieldDecorator('key', {
                                initialValue: key,
                                rules: [{ required: true, message: '菜单key必输' }],

                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="菜单key(唯一不能重复)"
                                />
                            )}
                        </Form.Item>
                        <Form.Item label="菜单序列">
                            {getFieldDecorator('index', {
                                initialValue: index,
                                rules: [{ required: true, message: '菜单序列必输' }]
                            })(
                                <Input
                                    className="h-40"
                                    type="number"
                                    placeholder="菜单序列(唯一不能重复)"
                                />
                            )}
                        </Form.Item>
                    </Form>
                    {
                        isEdit && id &&
                        <div className="menu-config-btns">
                            {
                                !parentID &&
                                <Button type="primary" onClick={openAddModal} className="">增加子菜单</Button>
                            }
                            <Button type="primary" onClick={saveForm} className="">保存</Button>
                            <Popconfirm
                                onConfirm={removeMenu}
                                title="确定删除吗？"
                                okText="删除"
                                cancelText="取消"
                                icon={<Icon type="question-circle-o" style={{ color: 'red' }} />}
                            >
                                <Button type="danger" className="">删除</Button>
                            </Popconfirm>

                        </div>
                    }
                </div >
            )
        })
        return <ConfigForm />
    }

    // 新建菜单的modal
    CreateForm = (visibleMenuModal, { parentID, menuName, icon, url, key, id, index }) => {
        const CreateFormMan = Form.create()(props => {
            const { form } = props
            const { getFieldDecorator } = form;
            const onMenuModalOk = () => {
                form.validateFields((err, values) => {
                    if (!err) {
                        console.log(111)
                        const { modalTitle } = this.state
                        const { id } = this.state.currentMenu
                        const params = Object.assign({}, values)
                        if (modalTitle === '新增子菜单' && id) {
                            params.parentID = id
                        }
                        fetch.post('GasMenu/Add', params).then(res => {
                            if (res.isSuccess) {
                                this.getAllMenus()
                                this.setState({
                                    visibleMenuModal: false
                                })
                            }
                        })
                    }
                })
            }

            return (
                <Modal title={this.state.modalTitle}
                    cancelText='取消'
                    onCancel={this.onMenuModalClose.bind(this)}
                    onOk={onMenuModalOk}
                    okText='确定'
                    visible={visibleMenuModal}>
                    <div>
                        <Form className="login-form" >
                            <Form.Item label="parentID" className="hidden-input">
                                {getFieldDecorator('parentID', {
                                    initialValue: parentID
                                })(
                                    <Input
                                        className="h-40"
                                        type="text"
                                        placeholder="parentID"
                                    />,
                                )}
                            </Form.Item>
                            <Form.Item label="Id" className="hidden-input">
                                {getFieldDecorator('id', {
                                    initialValue: id
                                })(
                                    <Input
                                        className="h-40"
                                        type="text"
                                        placeholder="parentID"
                                    />,
                                )}
                            </Form.Item>
                            <Form.Item label="菜单名" >
                                {getFieldDecorator('menuName', {
                                    initialValue: menuName,
                                    rules: [{ required: true, message: '菜单名必输' }],
                                })(
                                    <Input
                                        className="h-40"
                                        type="text"
                                        placeholder="菜单名"
                                    />,
                                )}
                            </Form.Item>
                            <Form.Item label="菜单图标">
                                {getFieldDecorator('icon', {
                                    initialValue: icon
                                })(
                                    <Input
                                        className="h-40"
                                        type="text"
                                        placeholder="菜单图标"
                                    />
                                )}
                            </Form.Item>
                            <Form.Item label="菜单地址">
                                {getFieldDecorator('url', {
                                    initialValue: url,
                                    rules: [{ required: true, message: '菜单地址必输' }],
                                })(
                                    <Input
                                        className="h-40"
                                        type="text"
                                        placeholder="菜单地址"
                                    />
                                )}
                            </Form.Item>
                            <Form.Item label="菜单key">
                                {getFieldDecorator('key', {
                                    initialValue: key,
                                    rules: [{ required: true, message: '菜单key必输' }]
                                })(
                                    <Input
                                        className="h-40"
                                        type="text"
                                        placeholder="菜单key(唯一不能重复)"
                                    />
                                )}
                            </Form.Item>
                            <Form.Item label="菜单序列">
                                {getFieldDecorator('index', {
                                    initialValue: index,
                                    rules: [{ required: true, message: '菜单序列必输' }]
                                })(
                                    <Input
                                        className="h-40"
                                        type="number"
                                        placeholder="菜单序列(唯一不能重复)"
                                    />
                                )}
                            </Form.Item>
                        </Form>
                    </div >
                </Modal>
            )
        })
        return <CreateFormMan />
    }


    render() {
        return (
            <div>
                <h3>菜单设置</h3>
                <div className="d-flex">
                    <Card className="menu-tree" title="菜单预览" style={{ width: 'calc(((100vw - 180px) / 4) * 2.5)', height: 'calc(100vh - 120px)', overflowY: 'scroll' }}>
                        <Button onClick={this.openAddMenuModal.bind(this)} style={{ marginBottom: '10px' }}>新建菜单</Button>
                        <Tree
                            autoExpandParent={true}
                            blockNode={true}
                            onSelect={this.onMenuTreeSelect.bind(this)}
                            showIcon
                            switcherIcon={<Icon type="down" />}
                        >
                            {
                                this.state.menuList.map(item => {
                                    return <TreeNode title={item.menuName} key={item.key}>
                                        {
                                            item.children.length ?
                                                item.children.map(child => {
                                                    return <TreeNode title={child.menuName} key={child.key}></TreeNode>
                                                }) :
                                                ''
                                        }
                                    </TreeNode>
                                })
                            }
                        </Tree>
                    </Card>
                    <Card title="菜单配置" className="menu-config" style={{ width: 'calc(((100vw - 180px) / 4) * 1.5)', height: 'calc(100vh - 120px)', borderLeft: '0' }} >
                        {
                            this.configItem(this.state.currentMenu, true)
                        }
                    </Card>
                    {
                        this.CreateForm(this.state.visibleMenuModal, this.state.addMenu)
                    }
                </div>

            </div>
        );
    }
}

export default Form.create()(MenuSetting);